Styling Every Third List Item Using :nth-child() in CSS
You can use the :nth-child() pseudo-class in CSS to style elements based on their order within a parent. To target every third list item, you can use the pattern 3n inside :nth-child().
:nth-child()selects elements based on their position within a parent element.You can use formulas like
2n,3n, or3n+1to create repeating patterns.li:nth-child(3n)targets every third list item in a list.
In this example, the :nth-child(3n) selector highlights every third list item with a blue background and bold text. You can adjust the number to style elements in other repeating sequences.
Use
:nth-child()for pattern-based styling instead of adding extra classes.Remember that counting starts at 1, not 0.
Use
:nth-of-type()when you only want to target specific element types among mixed children.Combine with transitions for smooth visual effects.